<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>人口动态变化分析</title><!--引入echarts.js-->
    <#--<#include "../../include/head-file.ftl">-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <#--图表-->
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
    <script src="${base}/static/report/map-echarts/hainan.json"></script>
    <script src="${base}/static/report/map-echarts/world.json"></script>
    <script src="${base}/static/report/map-echarts/worldNameMap.json"></script>
</head>
<body>
<div id="content" style="background: white;">
    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">一、实时总人口</div>
    <div id="table0-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <div id="myecharts0" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 实时人口数量及分布情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">二、常住人口</div>
    <div id="table1-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <table  id='table1' style="margin-top:15px;">
        <tr>
            <th>所在地区</th>
            <th>上周人数（万）</th>
            <th>本周人数（万）</th>
            <th>增长率（%）</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表1 长期居住和工作在各地区人口数量统计情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">三、流动人口</div>
    <div id="table2-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
    <!-- <table  id='table2' style="margin-top:15px;">
        <tr>
            <th>地市</th>
            <th>人数（万）</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表2 各区域内流动用户数量及分布特征</div> -->
    <div id="myecharts2" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图2 各区域内流动用户数量及分布特征</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">四、境外人口</div>
    <div id="table3-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <!-- <table  id='table3' style="margin-top:20px;">
        <tr>
            <th>手机归属国家</th>
            <th>人口数量统计</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表3 来自不同国家的境外人群数量特征</div> -->
    <div id="myecharts3" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 来自不同国家的境外人群数量特征</div>

    <!-- <table  id='table4' style="margin-top:15px;">
        <tr>
            <th>地市</th>
            <th>人口数量统计</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表4 各区域内境外人群分布特征</div> -->
    <div id="myecharts4" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 各区域内境外人群分布特征</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">五、人口地理分布</div>
    <div id="table5-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <table  id='table5' style="margin-top:20px;">
        <tr>
            <th>区域</th>
            <th>地市</th>
            <th>人口数量统计</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表5 人口地理分布特征</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">六、走私人员出行OD分析</div>
    <div id="table6-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <!-- <table  id='table6' style="margin-top:20px;">
        <tr>
            <th>出行次数</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表6 走私人员出行次数分布特征</div> -->
    <div id="myecharts6" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图6 走私人员出行次数分布特征</div>

    <div id="table7-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <!-- <table  id='table7' style="margin-top:20px;">
        <tr>
            <th>时间区间</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表7 走私人员出行时间分布特征</div> -->
    <div id="myecharts7" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图7 走私人员出行时间分布特征</div>

    <div id="table8-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <!-- <table  id='table8' style="margin-top:20px;">
        <tr>
            <th>时间区间</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表8 走私人员出行距离分布特征</div> -->
    <div id="myecharts8" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图8 走私人员出行距离分布特征</div>

    <!-- <table  id='table9' style="margin-top:20px;">
        <tr>
            <th>区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表9 走私人员出发地分布特征</div> -->
    <div id="myecharts9" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图9 走私人员出发地分布特征</div>

    <!-- <table  id='table10' style="margin-top:20px;">
        <tr>
            <th>区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表10 走私人员到达地分布特征</div> -->
    <div id="myecharts10" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图10 走私人员到达地分布特征</div>

    <!-- <table  id='table11' style="margin-top:20px;">
        <tr>
            <th>区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表11 走私人员居住地分布特征</div> -->
    <div id="myecharts11" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图11 走私人员居住地分布特征</div>

    <!-- <table  id='table12' style="margin-top:20px;">
        <tr>
            <th>区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表12 走私人员工作地分布特征</div> -->
    <div id="myecharts12" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图12 走私人员工作地分布特征</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">七、沿海岸线人口分布分析</div>
    <div id="table13-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <!-- <table  id='table13' style="margin-top:20px;">
        <tr>
            <th>居住地区域</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表13 常住人口居住地分布特征</div> -->
    <div id="myecharts13" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图13 常住人口居住地分布特征</div>

    <!-- <table  id='table14' style="margin-top:20px;">
        <tr>
            <th>工作地区域</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表14 常住人口工作地分布特征</div> -->
    <div id="myecharts14" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图14 常住人口工作地分布特征</div>

    <!-- <table  id='table15' style="margin-top:20px;">
        <tr>
            <th>活跃区域所在区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表15 常规活动区域分布特征</div> -->
    <div id="myecharts15" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图15 常规活动区域分布特征</div>

    <!-- <div id="map1"style="width: 1000px;height:500px;margin: 0 auto;margin-top: 20px;"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 沿海岸线人口职住地图</div> -->

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">八、城市人口迁徙</div>
    <div id="table16-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <table  id='table16' style="margin-top:20px;">
        <tr>
            <th>目前居住地市</th>
            <th>上月居住地市</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表16 城市人口迁入情况</div>
    <table  id='table17' style="margin-top:20px;">
        <tr>
            <th>上月居住地市</th>
            <th>目前居住地市</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表17 城市人口迁出情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">九、进出岛人员与地域关联统计</div>
    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
        截至目前，统计到的境外人员入岛国家分布情况如下图所示：
    </div>
    <div id="myecharts18" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图18 境外人员入岛国家分布情况</div>

    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
        截至目前，统计到的省外人员入岛省份分布情况如下图所示：
    </div>
    <div id="myecharts19" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图19 省外人员入岛省份分布情况</div>

    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
        截至目前，统计到的省内人员出岛市县分布情况如下图所示：
    </div>
    <div id="myecharts20" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图20 省内人员出岛市县分布情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">十、人口结构</div>
    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
        根据人物画像能力库内的人口信息，得出海南省当前人口性别及年龄结构信息如下图所示：
    </div>
    <div id="myecharts21" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图21 海南省人口结构</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">十一、区域人口职业结构</div>
    <div id="table22-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
</div>
<script>
    var dataTable1 = ${dataTable1};
    var dataTable1MaxRate = ${dataTable1MaxRate};
    $("#table1-desc").text("根据长期居住和工作在各地区人口数量统计表（表1）得出，" + dataTable1[0].county + "地区以" + dataTable1[0].next + "万常住人口数量位居本省首位，" + dataTable1[1].county + "地区人口数量" + dataTable1[1].next + "万，位居第二，" + dataTable1[2].county + "地区常住口人数量" + dataTable1[2].next + "万排名第三，" + dataTable1MaxRate.county + "地区常住人口增长率最高，高达" + dataTable1MaxRate.rate + "%。常住人口增加与两方面因素有关，一是自然生育率，二是人口流入数量，常住人口增加与当地经济发展程度呈正相关，经济越发达，吸引外来就业的劳动力就越多。");
    var dataTable2 = ${dataTable2};
    var dataTable2Total = ${dataTable2Total};
    $("#table2-desc").text("流动人口是指离开户籍所在地的县、市或者市辖区,以工作、生活为目的异地居住的人员。截止目前，本省流动人口总量已达" + dataTable2Total + "万人，根据各区域内流动用户数量及分布特征表（表2）可看出，" + dataTable2[0].county + "市流动人口最多，数量高达" + dataTable2[0].count + "万");
    var dataTable3 = ${dataTable3}
    var dataTable4 = ${dataTable4}
    $("#table3-desc").text("截至目前，全省共有境外人员${dataTable3Total}人，由表3可见，" + dataTable3[0].county + "人占所有境外人员的${dataTable3FirstRate}%，人数高达" + dataTable3[0].count + "人，其次是" + dataTable3[1].county + "人，人数为" + dataTable3[1].count + "人，占所有境外人员的${dataTable3SecondRate}%。其中，" + dataTable4[0].county + "市内境外人口最多，人数高达" + dataTable4[0].count + "人，占全部境外人口的${dataTable4FirstRate}%，其次是" + dataTable4[1].county + "市，超过" + dataTable4[1].count + "人，" + dataTable4[dataTable4.length-1].county + "市的境外人口最少，人数仅为" + dataTable4[dataTable4.length-1].count+ "人，（表4）由此可见，境外人口首选地区为" + dataTable4[0].county +"市，其次是"+dataTable4[dataTable4.length-1].county+"市。")
    var dataTable5 = ${dataTable5}
    var dataTable5Region = ${dataTable5Region}
    $("#table5-desc").text("截至目前，省内人口的地理分布，主要受自然环境条件和经济发展水平的影响，根据统计结果发现，" + dataTable5Region[0].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5FirstRegionRate}%，人口数量最多，高达" + dataTable5Region[0].count + "人，" +
        dataTable5Region[1].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5SecondRegionRate}%，" +
        dataTable5Region[2].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5ThirdRegionRate}%，" +
        dataTable5Region[3].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5FourthRegionRate}%，" +
        dataTable5Region[4].region.substr(0,1) + "部区域人口占比最少，占全省人口数量${dataTable5LastRegionRate}%，人口数量为" + dataTable5Region[4].count + "人。")
    var dataTable6 = ${dataTable6}
    $("#table6-desc").text("据统计，省内每天人均出行次数为{{data}}次/人·天，按此标准计算，截至目前，省内居民每天出行量约{{data}}次，按出行次数划分4个区间，各区间人数占比见下表。")
    var dataTable7 = ${dataTable7}
    var dataTable7Sorted = ${dataTable7Sorted}
    $("#table7-desc").text("据统计，一天中会有两个高峰，第一个高峰为" + dataTable7Sorted[0].time + "时间段，这段时间内的出行人数占一天中的${dataTable7FirstRegion}%，出行人数高达" + dataTable7Sorted[0].count + "人，第二个高峰为" + dataTable7Sorted[1].time + "时间段，这段时间内的出行人数占一天中的${dataTable7SecondRegion}%，出行人数高达" + dataTable7Sorted[1].count + "人。")
    var dataTable8 = ${dataTable8}
    var dataTable8Sorted = ${dataTable8Sorted}

    var dataTable9 = ${dataTable9}
    var dataTable10 = ${dataTable10}

    var dataTable11= ${dataTable11}
    var dataTable12= ${dataTable12}

    $("#table8-desc").text("据统计," + dataTable8Sorted[0].time + "的人数占比最多，占总出行人数的${dataTable8FirstRate}%，平均出行距离在50KM以上的人数为" + dataTable8[5].count + "人，占总出行人数的${dataTable8LastRate}%。出行距离主要反映出行行程长短，与出行目的和城市布局等诸多因素有关，不同出行目的和交通方式的出行距离不同。由表9和表10可看出，由" + dataTable9[0].county + "区作为出发点的出行人数最多，以" + dataTable10[0].county + "区作为目的地的出行人数最多，由表11和表12可看出，居住在" + dataTable11[0].county + "区的人数最多，高达" + dataTable11[0].count + "人，工作在" + dataTable12[0].county + "区的人数最多，一共有" + dataTable12[0].count + "人")

    var dataTable13 = ${dataTable13}
    var dataTable14 = ${dataTable14}

    var dataTable15 = ${dataTable15}

    $("#table13-desc").text("截至目前统计，沿海岸线常住人口居住地分布主要集中于于" + dataTable13[0].county + "区，人口数高达" + dataTable13[0].count +"人，占沿海岸线总人口数的${dataTable13FirstRate}%，工作地分布主要集中于" + dataTable14[1].county + "区，人口数高达达" + dataTable14[1].county + "人，占沿海岸线总人口数的${dataTable14FirstRate}%，沿海岸线居民常规活动区域集中于" + dataTable15[0].county + "区。")

    var dataTable16 = ${dataTable16}
    var dataTable17 = ${dataTable17}
    var dataTable16Merged = ${dataTable16Merged}
    var dataTable17Merged = ${dataTable17Merged}

    $("#table16-desc").text("据统计，由表16可看出"+dataTable16Merged[0].preCounty+"市是全省迁入规模最大的城市，迁入总人数为"+dataTable16Merged[0].count+"人，占比${dataTable16FirstRate}%，其次是"+dataTable16Merged[1].preCounty+"是，迁入总人数为"+dataTable16Merged[1].count+"人，占比${dataTable16SecondRate}%，"+dataTable16Merged[2].preCounty+"是迁入总人数为"+dataTable16Merged[2].count+"人，占比${dataTable16ThirdRate}%，排名第三。由表17可看出"+dataTable17Merged[0].preCounty+"市是全省迁出规模最大的城市，迁出总人数为"+dataTable17Merged[1].count+"人，占比${dataTable17FirstRate}%，其次是"+dataTable17Merged[1].preCounty+"是，迁出总人数为"+dataTable17Merged[1].count+"人，占比${dataTable17SecondRate}%，"+dataTable17Merged[2].preCounty+"是迁出总人数为"+dataTable17Merged[1].count+"人，占比${dataTable17ThirdRate}%，排名第三。")

    $(document).ready(function(){
        // $("#test1").text("Hello world!");
        $.each(dataTable1,function(index,item){
            var tr='<td>'+item.county+'</td>'+'<td>'+item.pre+'</td>'+'<td>'+item.next+'</td>'+'<td>'+item.rate+'</td>';
            $("#table1").append('<tr>'+tr+'</tr>')
        });
        // $.each(dataTable2,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table2").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable3,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table3").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable4,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table4").append('<tr>'+tr+'</tr>')
        // });
        $.each(dataTable5,function(index,item){
            var tr='<td>'+item.region+'</td>'+'<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            $("#table5").append('<tr>'+tr+'</tr>')
        });
        // $.each(dataTable6,function(index,item){
        //     var tr='<td>'+item.frequency+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table6").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable7,function(index,item){
        //     var tr='<td>'+item.time+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table7").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable8,function(index,item){
        //     var tr='<td>'+item.time+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table8").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable9,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table9").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable10,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table10").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable11,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table11").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable12,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table12").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable13,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table13").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable14,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table14").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable15,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table15").append('<tr>'+tr+'</tr>')
        // });
        $.each(dataTable16,function(index,item){
            var county = '<td>'+item.county+'</td>';
            if (item.county==='总计') {
                county = '<td style="font-weight: bold">'+item.county+'</td>';
            }
            var tr='<td>'+item.preCounty+'</td>'+county+'<td>'+item.count+'</td>';
            $("#table16").append('<tr>'+tr+'</tr>')
        });
        $.each(dataTable17,function(index,item){
            var county = '<td>'+item.county+'</td>';
            if (item.county==='总计') {
                county = '<td style="font-weight: bold">'+item.county+'</td>';
            }
            var tr='<td>'+item.preCounty+'</td>'+county+'<td>'+item.count+'</td>';
            $("#table17").append('<tr>'+tr+'</tr>')
        });
        merge("#table16 tr");
        merge("#table17 tr");

        // console.log("hainan",hainan);
        // var mapData = [{pubArea: "海口市", pubCount: 10}, {pubArea: "文昌市", pubCount: 813}, {pubArea: "东方市", pubCount: 103}];
        /*var mapData = ${dataTable15Map}
        var hainanMap=echarts.init(document.getElementById('map1'));
        echarts.registerMap('hainan', hainan);
        var outdata = $.map(mapData, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option = getOptionMap(outdata);
        hainanMap.setOption(option);*/

        /*--------------调整---------------*/
        echarts.registerMap('hainan', hainan);
        // 实时总人口
        $("#table0-desc").text("截至目前省内实时人口总数为X人，各区域内的实时人口数量及分布情况如下表所示，")
        var mapData0 = [{pubArea: "琼中", pubCount: 100}, {pubArea: "保亭", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
        var mapEcharts0=echarts.init(document.getElementById('myecharts0'));
        var outdata0 = $.map(mapData0, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option0 = getOptionMap(outdata0);
        // echarts.registerMap('hainan', hainan);
        mapEcharts0.setOption(option0);
        // 流动人口
        var mapData2 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
        var mapEcharts2=echarts.init(document.getElementById('myecharts2'));
        var outdata2 = $.map(mapData2, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option2 = getOptionMap(outdata2);
        // echarts.registerMap('hainan', hainan);
        mapEcharts2.setOption(option2);
        // 境外人口
        var mapData3 = [{ name: '中国大陆', value: 411.465 }, { name: '加拿大', value: 60508.978 },];
        var mapEcharts3=echarts.init(document.getElementById('myecharts3'));
        var outdata3 = $.map(mapData3, function(n, i){
            return {
                name: n.name,
                value: n.value
            }
        });
        var option3 = getOptionMap(outdata3, 'world');
        echarts.registerMap('world', world);
        mapEcharts3.setOption(option3)

        var mapData4 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
        var mapEcharts4=echarts.init(document.getElementById('myecharts4'));
        var outdata4 = $.map(mapData4, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option4 = getOptionMap(outdata4);
        // echarts.registerMap('hainan', hainan);
        mapEcharts4.setOption(option2);
        // 人员出行OD分析
        var result6 = [
            { label: "0~2次", count: 1006 },
            { label: "2~4次", count: 565 },
            { label: "4~6次", count: 4954 },
            { label: "6~8次", count: 221 }
        ];
        var result7 = [
            { label: "08:00", count: 6 },
            { label: "09:00", count: 1445 },
            { label: "10:00", count: 444 },
            { label: "11:00", count: 2144 },
        ];
        var result8 = [
            { label: "0~3KM", count: 6 },
            { label: "3~6KM", count: 445 },
            { label: "6~9KM", count: 444 },
            { label: "9~12KM", count: 244 },
        ];
        var myecharts6 = echarts.init(document.getElementById("myecharts6"));
        var barXAxisData6 = $.map(result6, function(n, i){ return n.label  });
        var countValues6 = $.map(result6, function(n, i){ return n.count });
        var optionBar6 = getOptionBar(false, barXAxisData6, countValues6, '人员出行次数分布特征');
        myecharts6.setOption(optionBar6);

        var myecharts7 = echarts.init(document.getElementById("myecharts7"));
        var barLegendData7 = $.map(result7, function(n, i){ return n.label })
        var barValues7 = $.map(result7, function(n, i){ return n.count })
        var option7 = getOptionLine(barLegendData7, barValues7, '人员出行时间分布特征')
        myecharts7.setOption(option7);

        var myecharts8 = echarts.init(document.getElementById("myecharts8"));
        var barXAxisData8 = $.map(result8, function(n, i){ return n.label  });
        var countValues8 = $.map(result8, function(n, i){ return n.count });
        var optionBar8 = getOptionBar(false, barXAxisData8, countValues8, '人员出行距离分布特征');
        myecharts8.setOption(optionBar8);

        var mapData9 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
        var mapEcharts9=echarts.init(document.getElementById('myecharts9'));
        var outdata9 = $.map(mapData9, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option9 = getOptionMap(outdata9);
        // echarts.registerMap('hainan', hainan);
        mapEcharts9.setOption(option9);

        var mapData10 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
        var mapEcharts10=echarts.init(document.getElementById('myecharts10'));
        var outdata10 = $.map(mapData10, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option10 = getOptionMap(outdata10);
        // echarts.registerMap('hainan', hainan);
        mapEcharts10.setOption(option10);

        var mapData11 = [{pubArea: "海口", pubCount: 10}, {pubArea: "五指山", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
        var mapEcharts11=echarts.init(document.getElementById('myecharts11'));
        var outdata11 = $.map(mapData11, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option11 = getOptionMap(outdata11);
        // echarts.registerMap('hainan', hainan);
        mapEcharts11.setOption(option11);

        var mapData12 = [{pubArea: "海口", pubCount: 10}, {pubArea: "万宁", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];
        var mapEcharts12=echarts.init(document.getElementById('myecharts12'));
        var outdata12 = $.map(mapData12, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option12 = getOptionMap(outdata12);
        // echarts.registerMap('hainan', hainan);
        mapEcharts12.setOption(option12);

        // 沿海岸线人口分布分析
        var mapData13 = [{pubArea: "海口", pubCount: 10}, {pubArea: "儋州", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];
        var mapEcharts13=echarts.init(document.getElementById('myecharts13'));
        var outdata13 = $.map(mapData13, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option13 = getOptionMap(outdata13);
        // echarts.registerMap('hainan', hainan);
        mapEcharts13.setOption(option13);

        var mapData14 = [{pubArea: "海口", pubCount: 10}, {pubArea: "万宁", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];
        var mapEcharts14=echarts.init(document.getElementById('myecharts14'));
        var outdata14 = $.map(mapData14, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option14 = getOptionMap(outdata14);
        // echarts.registerMap('hainan', hainan);
        mapEcharts14.setOption(option14);

        var mapData15 = [{pubArea: "海口", pubCount: 10}, {pubArea: "万宁", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];
        var mapEcharts15=echarts.init(document.getElementById('myecharts15'));
        var outdata15 = $.map(mapData15, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        });
        var option15 = getOptionMap(outdata15);
        // echarts.registerMap('hainan', hainan);
        mapEcharts15.setOption(option15);

        // 进出岛人员与地域关联统计
        var result18 = [
            { label: "新加坡", count: 1006 },
            { label: "日本", count: 565 },
            { label: "加拿大", count: 4954 },
            { label: "美国", count: 221 }
        ];
        var myecharts18 = echarts.init(document.getElementById("myecharts18"));
        var barXAxisData18 = $.map(result18, function(n, i){ return n.label  });
        var countValues18 = $.map(result18, function(n, i){ return n.count });
        var optionBar18 = getOptionBar(false, barXAxisData18, countValues18, '境外人员入岛情况');
        myecharts18.setOption(optionBar18);

        var result19 = [
            { label: "广东", count: 1006 },
            { label: "广西", count: 565 },
            { label: "湖南", count: 4954 },
            { label: "上海", count: 221 }
        ];
        var myecharts19 = echarts.init(document.getElementById("myecharts19"));
        var barXAxisData19 = $.map(result19, function(n, i){ return n.label  });
        var countValues19 = $.map(result19, function(n, i){ return n.count });
        var optionBar19 = getOptionBar(false, barXAxisData19, countValues19, '省外人员入岛情况');
        myecharts19.setOption(optionBar19);

        var result20 = [
            { label: "琼海", count: 1006 },
            { label: "海口", count: 565 },
            { label: "陵水", count: 4954 },
            { label: "三亚", count: 221 }
        ];
        var myecharts20 = echarts.init(document.getElementById("myecharts20"));
        var barXAxisData20 = $.map(result20, function(n, i){ return n.label  });
        var countValues20 = $.map(result20, function(n, i){ return n.count });
        var optionBar20 = getOptionBar(false, barXAxisData20, countValues20, '省内人员出岛情况');
        myecharts20.setOption(optionBar20);

        // 人口结构
        var result21 = [
            // {
            //     type: '男性',
            //     datas: [
                    {label: '0~4岁', count: 195},
                    {label: '4~10岁', count: 55},
                    {label: '10~16岁', count: 641},
                    {label: '16~34岁', count: 5},
                    {label: '34~50岁', count: 115},
                    {label: '50~100岁', count: 115},
            //     ]
            // },
            // {
            //     type: '女性',
            //     datas: [
            //         {label: '0~4岁', count: 44},
            //         {label: '4~10岁', count: 88},
            //         {label: '10~16岁', count: 99},
            //         {label: '16~34岁', count: 115},
            //         {label: '34~50岁', count: 115},
            //         {label: '50~100岁', count: 115},
            //     ]
            // },
        ]
        // var series = [], xCategory= []
        var myecharts21 = echarts.init(document.getElementById("myecharts21"));
        // $.each(result21,function(index,item) {
        //     var obj = { name: '', type: 'bar', data: [] }
        //     var count = $.map(item.datas, function(n, i){ return n.count; })
        //     if(index===0) {
        //         xCategory = $.map(item.datas, function(n, i){ return n.label; })
        //     }
        //     obj.name = item.type;
        //     obj.data = count;
        //     series.push(obj);
        // });
        // var option21 = getOptionBar(true, xCategory, series, '海南省人员结构', ['#4b91ff', '#f2637b'])
        var barXAxisData21 = $.map(result21, function(n, i){ return n.label  });
        var countValues21 = $.map(result21, function(n, i){ return n.count });
        var option21 = getOptionBar(false, barXAxisData21, countValues21, '海南省人员结构')
        myecharts21.setOption(option21);

        // 区域人口职业结构
        $("#table22-desc").text("据统计，海南省共有从业人员541万人，其中第一产业171万人，第二产业62万人，第三产业308万人，三次产业从业人员的构成比例为42.75：15.5：77。其中海口市的从业人员数量最多，高达145.95万人，其次是三亚市，从业人员48.43万人，儋州市排第三，从业人员共有38.88万人。")
    });

    function getOptionMap(outdata, map) {
        var mapType = map?map:'hainan'
        var option = {
            tooltip: {
                show: true,
                formatter: function (params) {
                    if (params.value) {
                        return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
                    } else {
                        return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;'
                    }
                },
            },
            visualMap: {
                min: 0,
                max: 1000,
                itemWidth: 10,
                itemHeight: 89,
                orient: 'horizontal',
                left: '50',
                top: '0',
                text: ['密', '疏'],
                textStyle: {
                    color: '#666666',
                    fontSize: 13,
                },
                inRange: {
                    color: ['#FFFFFF','#ADFF2F','#ADFF2F','#FFA500','#FF4500','#FF0000'],//['#D9EEFF', '#2F9BFF'],
                },
                outOfRange: {
                    show: false,
                },
            },
            geo: {
                map: mapType,
                show: true,
                roam: false,
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false,
                    },
                },
                itemStyle: {
                    normal: {
                        show: false,
                    },
                },
            },
            series: [
                {
                    type: 'map',
                    map: mapType,
                    aspectScale: 0.75,
                    zoom: 1.2,
                    label: {
                        normal: {
                            formatter: function (para) {
                                return '{name|' + para.name + '}'
                            },
                            rich: {
                                cnNum: {
                                    fontSize: 11,
                                    color: '#333333',
                                    align: 'center',
                                },
                                name: {
                                    fontSize: 10,
                                    color: '#333333',
                                    align: 'center',
                                    lineHeight: 20,
                                },
                            },
                            //formatter: '{b}',
                            color: '#333333',
                            show: mapType==='hainan'?true:false,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#D9EEFF',
                            borderColor: mapType==='hainan'?'#ffffff':'#5bacee',
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: '#FFAE00',
                        },
                    },
                    data: outdata,
                    nameMap: mapType==='hainan'?
                        {
                            "海口市": "海口",
                            "三亚市": "三亚",
                            "儋州市": "儋州",
                            "五指山市": "五指山",
                            "琼海市": "琼海",
                            "文昌市": "文昌",
                            "万宁市": "万宁",
                            "东方市": "东方",
                            "定安县": "定安",
                            "屯昌县": "屯昌",
                            "澄迈县": "澄迈",
                            "临高县": "临高",
                            "白沙黎族自治县": "白沙",
                            "昌江黎族自治县": "昌江",
                            "乐东黎族自治县": "乐东",
                            "陵水黎族自治县": "陵水",
                            "保亭黎族苗族自治县": "保亭",
                            "琼中黎族苗族自治县": "琼中",
                            "南海诸岛": "南海诸岛"
                        } : worldNameMap
                },
            ],
        }
        return option
    }
    function getOptionBar(isMultipleYAxes, barXAxisData, countValues, title, color) {
        // isMultipleYAxes 是否多y轴
        var series = !isMultipleYAxes? [ { type: "bar", data: countValues } ] : countValues
        var legend = isMultipleYAxes? $.map(countValues, function(n, i){ return n.name; }): []
        var option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            color: color?color: ['#4b91ff'],
            legend: {
                right: '4%',
                data: legend,
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                data: barXAxisData,
            },
            yAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
                axisLabel: {
                    fontSize: 14,
                    show: true,
                    formatter: function(params) {
                        var result = ''
                        result = params / 10000
                        if (params > 1000) {
                            return result + '万'
                        } else {
                            return params
                        }
                    },
                },
            },
            series: series
        }
        return option
    }
    function getOptionLine(barLegendData, barValues, title) {
        var option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
            },
            color: ['#4b91ff'],
            legend: false,
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: barLegendData,
            },
            yAxis: {
                name: '单位/万',
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    fontSize: 14,
                    show: true,
                    formatter: function(params) {
                        var result = ''
                        result = params / 10000
                        if (params > 1000) {
                            return result + '万'
                        } else {
                            return params
                        }
                    },
                },
            },
            series: [
                {
                    type: "line",
                    data: barValues,
                    smooth: true,
                    areaStyle: {opacity: 0.3}
                }
            ]
        }
        return option
    }
    function merge(id) {
        var $st = -1;
        $(id).each(function(r) {
            if($st === -1) {
                $st = $(this).find('td:eq(0)');
            }else if($st.html() === $(this).find('td:eq(0)').html()) {
                $st.prop('rowspan', $st.prop('rowspan')+1);
                $(this).find('td:eq(0)').remove();
            }else $st = $(this).find('td:eq(0)');
        });
    }

    // function get() {
    //     var that = this;
    //     ms.http.get(ms.manager + "/cms/content/get.do", {
    //         "id": '1485821904211931137'
    //     }).then(function (res) {
    //         console.log("res",res);
    //         // var aa = document.documentElement.innerHTML;
    //         // console.log("t.value",aa);
    //         var  aa = $('#content').html();
    //         console.log("t.value",aa);
    //     });
    // }
</script>
<style>
    table th, table td { border-bottom: 0.5px solid #999;border-right: 0.5px solid #999999; }
    table { border-top: 0.5px solid #999; border-left: 0.5px solid #999;width: 800px; line-height: 40px; text-align: center; border-collapse: collapse; padding:2px;margin: 0 auto;font-size: 20px;}
</style>
</body>
</html>